---
type: tutorial
title: 사이트를 웹에 배포하기
description: '튜토리얼: 처음 만드는 Astro 블로그 — 튜토리얼 프로젝트의 Github 리포지토리를 Netlify에 연결하여 웹에 배포'
i18nReady: true
---
import Checklist from '~/components/Checklist.astro';
import Box from '~/components/tutorial/Box.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';
import Badge from "~/components/Badge.astro"

<PreCheck>
  - GitHub 리포지토리를 Netlify 앱으로 추가하기
  - Astro 사이트를 웹에 배포하기
</PreCheck>

이 과정에서는 GitHub 리포지토리를 Netlify에 연결합니다. 프로젝트 코드에 변경 사항을 커밋할 때마다 Netlify는 사이트를 실시간으로 빌드하여 웹에 배포합니다.

:::tip[사용하는 서비스]
이 튜토리얼에서는 **Netlify**를 사용하여 사이트를 인터넷에 배포하지만, 선호하는 호스팅 서비스가 있다면 해당 서비스를 사용하여 배포할 수도 있습니다.
:::

## Netlify 사이트 만들기

<Steps>
1. 아직 [Netlify](https://netlify.com) 계정이 없다면 무료로 가입하세요.

    사용자 이름을 메모해 두세요. 대시보드와 생성한 사이트들은 `https://app.netlify.com/teams/username`에서 확인할 수 있습니다.

2. <kbd>Add new project</kbd> > <kbd>Import an existing project</kbd>를 클릭하세요.

    Git 제공업체와 연결하라는 메시지가 나타나면 GitHub를 선택하고, 안내에 따라 GitHub 계정 인증을 진행하세요. 그런 다음, 목록에서 Astro 프로젝트의 GitHub 리포지토리를 선택하세요.

3. 마지막 단계입니다. 이 단계에서는 Netlify가 사이트 설정 화면을 보여줍니다. 기본값이 Astro 프로젝트에 적합하므로, 아래로 스크롤하여 <kbd>Deploy site</kbd> 버튼을 클릭하세요.
</Steps>

축하합니다. Astro 웹사이트가 생겼습니다!

## 프로젝트 이름 변경하기

Netlify의 사이트 개요 페이지에서 무작위로 생성된 프로젝트 이름과 `https://project-name-123456.netlify.app`과 같은 형태의 웹사이트 URL을 확인할 수 있습니다. 프로젝트 이름을 더 기억하기 쉬운 이름으로 변경할 수 있으며, 이렇게 하면 URL도 자동으로 업데이트됩니다.

## 웹사이트에 접속하기

사이트 설정에서 URL을 클릭하거나, 브라우저 창에 URL을 직접 입력하여 웹사이트를 확인해 보세요.

<Box icon="question-mark">
### 지식 테스트

기존 웹사이트의 홈페이지를 수정하고 싶다면, 어떤 단계를 거쳐야 할까요?

  <MultipleChoice>
    <Option>
      터미널을 열고 `create astro` 명령을 실행한 다음 Netlify URL로 접속합니다.
    </Option>
    <Option>
      Netlify 앱에서 설정을 변경한 다음 astro.new에서 새 Astro 프로젝트를 시작합니다.
    </Option>
    <Option isCorrect>
      `index.astro`를 수정합니다. 변경 사항을 GitHub에 커밋하고 푸시합니다. 나머지는 Netlify가 처리합니다!
    </Option>
  </MultipleChoice>
 </Box>

<Box icon="check-list">
## 체크리스트

<Checklist>
- [ ] 업데이트된 웹사이트를 온라인으로 확인할 수 있습니다.
- [ ] 다시 코딩을 시작할 준비가 됐어요!
</Checklist>
</Box>

### 리소스

- <p>[Netlify에 배포하기 위한 단계별 가이드](https://www.netlify.com/blog/2016/09/29/a-step-by-step-guide-deploying-on-netlify/) <Badge class="neutral-badge" text="외부 링크" /></p>
